import React from 'react';
import { useState, useEffect, memo } from 'react';
import axios from 'axios';
// memo 为高阶组件处理函数,
// 语法: memo(要处理的组件) 返回的结果处理后的新组件, 新组件就变成了纯组件
// 纯组件特点:只有当组件自身的state 或接收的父组件的props发生变化,该纯组件采用重新渲染
// 类组件的中的纯组件为 extend Purcomponent  
// 函数组件中的纯组件为memo
const Child2 = () => {
    // 搜索的关键字
    const [keywords, setKeywordsFn] = useState('');
    // 学校数据列表数据
    const [schoollist, setSchoolListFn] = useState([])


    useEffect(() => {
        axios.get('https://api.i-lynn.cn/college').then(res => {
            setSchoolListFn(res.data.data.list1)
        })
    }, [])

    const filterSchoolList = schoollist.filter(item => {
        console.log('filterSchoolList');
        return item.school_name.includes(keywords)
    })

    return (
        <div>
            {/* 输入框部分 */}
            <p>
                <input placeholder='请输入关键字' value={keywords} onChange={(e) => {
                    setKeywordsFn(e.target.value)
                }} />
            </p>

            {/* 列表展示部分 */}
            <ul>
                {
                    filterSchoolList.map(item => <li key={item.id}>{item.school_name}</li>)
                }
            </ul>
        </div>
    );
}

export default memo(Child2);
